
<template>
    <div class="flex flex-1 flex-col overflow-hidden">
        <div class="px-4 pb-0">
            <el-tabs v-model="tabIndex" class="pb-0">
                <el-tab-pane label="导航设置" name="nav" />
                <el-tab-pane label="菜单设置" name="menu" />
            </el-tabs>
        </div>

        <el-scrollbar>
            <div class="px-4 p-2">
                <Draggable v-model="diyData" :item-key="'selected'" animation="300" handle=".drag-move">
                    <template #item="{ element, index }">
                        <HoverClose class="mb-3" @close="handleDelete(index)">
                            <div class="w-full p-4 rounded bg-page">
                                <el-form-item label="导航图标">
                                    <material-picker
                                        v-model="element.unselected"
                                        :exclude-domain="true"
                                        upload-class="bg-body"
                                        size="60px"
                                    >
                                        <template #upload>
                                            <div class="upload-btn w-[60px] h-[60px]">
                                                <icon name="el-icon-Plus" :size="16" />
                                                <span class="text-xs leading-5">未选中</span>
                                            </div>
                                        </template>
                                    </material-picker>
                                    <material-picker
                                        v-model="element.selected"
                                        :exclude-domain="true"
                                        upload-class="bg-body"
                                        size="60px"
                                    >
                                        <template #upload>
                                            <div class="upload-btn w-[60px] h-[60px]">
                                                <icon name="el-icon-Plus" :size="16" />
                                                <span class="text-xs leading-5">
                                                    {{ tabIndex === 'nav' ? '选中' : '图标'}}
                                                </span>
                                            </div>
                                        </template>
                                    </material-picker>
                                </el-form-item>
                                <el-form-item label="导航名称">
                                    <el-input v-model="element.name" placeholder="请输入名称" />
                                </el-form-item>
                                <el-form-item label="链接地址">
                                    <links-picker v-model="element.link" client="pc" />
                                </el-form-item>
                                <el-form-item label="是否显示" style="margin-bottom: 0;">
                                    <div class="flex-1 flex items-center">
                                        <el-switch v-model="element.isEnable" />
                                        <div class="drag-move cursor-move ml-auto">
                                            <icon name="el-icon-Rank" size="18" />
                                        </div>
                                    </div>
                                </el-form-item>
                            </div>
                        </HoverClose>
                    </template>
                </Draggable>

                <div v-if="diyData.length <= 0">
                    <el-empty description="暂无数据" />
                </div>
            </div>
        </el-scrollbar>

        <div class=" px-4 py-2.5 border-t border-br-light text-right">
            <el-button @click="handleAdd">添加导航</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import Draggable from 'vuedraggable'
import feedback from '@/utils/feedback'
import type { AsidesItemType } from '../index.ts'

const props = defineProps({
    modelValue: {
        type: Object,
        default: () => ({
            nav: [] as AsidesItemType[],
            menu: [] as AsidesItemType[]
        })
    }
})

const emits = defineEmits<{
    (event: 'update:modelValue', value: any): void
}>()

// 当前选项
const tabIndex = ref<string>('nav')

// 排序数据
const sortData = ref<any>(props.modelValue)

// 装修数据
const diyData = computed({
    get() {
        return props.modelValue[tabIndex.value]
    },
    set(value) {
        sortData.value[tabIndex.value] = value
        emits('update:modelValue', props.modelValue)
    }
})

/**
 * 导航添加
 *
 * @author zero
 */
const handleAdd = () => {
    if (tabIndex.value === 'nav') {
        diyData.value.push({
            name: '',
            selected: '',
            unselected: '',
            isEnable: true,
            link: {}
        } as AsidesItemType)
    } else {
        diyData.value.push({
            name: '',
            selected: '',
            isEnable: true,
            link: {}
        } as AsidesItemType)
    }
}

/**
 * 导航删除
 *
 * @param {number} index
 * @author zero
 */
const handleDelete = (index: number) => {
    if (tabIndex.value === 'nav' && diyData.value.length <= 1) {
        return feedback.msgError('请至少保留1个导航')
    }
    diyData.value.splice(index, 1)
}

watch(
    () => props.modelValue,
    (value) => {
        if (value) {
            sortData.value = value
        }
    }, { immediate: true }
)
</script>

<style scoped lang="scss">
:deep(.el-tabs__header) {
    margin-bottom: 0;
}
</style>
